import React, { memo, useState, useEffect } from 'react'

const MyControlUseEffect = memo(() => {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState("hello useEffect messaege")
  
  useEffect(() => {
    console.log("05-MyControlUseEffect useEffect count", count)
  }, [count])

  useEffect(() => {
    console.log("05-MyControlUseEffect listen useEffect data");
    return () => {}
  }, []) // 依赖项为空数组，则只会在组件挂载和卸载时执行

  useEffect(() => {
    console.log("05-MyControlUseEffect useEffect-data")
    return () => {
      console.log("05-MyControlUseEffect useEffect-unmount")
    }
  }, [])
  
  return (
    <div>
      <button onClick={e => setCount(count+1)}>+1({count})</button>
      <button onClick={e => setMessage("change useEffect messaege")}>修改message({message})</button>
    </div>
  )
})

export default MyControlUseEffect